<template>
  <div class="wrap">
    <div class="header flex-cnt-btwn" v-bind:class="swipeClass.header" v-touchmove.prevent>
      <div class="search fill flex-cnt-start">
        <span class="iconfont icon-search"></span>
        <span class="search-txt">搜索</span>
      </div>
      <button class="btn btn-live">
        <span class="iconfont icon-duihuaqipao"></span>
      </button>
    </div>

    <feed-list v-bind:list="feedList"></feed-list>

    <btn-circle v-bind:btn-class="swipeClass.btn_circle"
      v-bind:useMask="true" v-bind:icon="isClickCircleBtn ? 'iconfont icon-close' : 'iconfont icon-yumaobi'"
      v-model="isClickCircleBtn" v-on:handle="circleBtnClick">
      <btn-circle-menu v-bind:showMenu="isClickCircleBtn">
        <menu-item v-bind:title="'分享'" v-bind:icon="'iconfont icon-weibiaoti-'"></menu-item>
        <menu-item v-bind:title="'回答'" v-bind:icon="'iconfont icon-tianjiahuida'"></menu-item>
        <menu-item v-bind:title="'提问'" v-bind:icon="'iconfont icon-tiwen'"></menu-item>
      </btn-circle-menu>
    </btn-circle>
  </div>
</template>

<script>
  import { BtnCircle, BtnCircleMenu, MenuItem } from 'CommonComponent/btn-circle'
  import FeedList from './components/feed-list.vue'
  
  import { mapState, mapActions } from 'vuex'

  export default {
    name: 'view-home',
    asyncData ({ store, params }) {
      if (store.state.home.isFirst) {
        return store.dispatch('home:getFeedList', store.state.cookies);
      }
    },
    data () {
      return {
        isClickCircleBtn: false
      }
    },
    computed: {
      ...mapState({
        swipeClass: state => state.swipeClass,
        scrollTop: state => state.home.scrollTop,
        feedList: state => state.home.feedList
      })
    },
    methods: {
      ...mapActions({
        swipe: 'swipe',
        resetSwipeClass: 'resetSwipeClass'
      }),
      circleBtnClick () {
        this.isClickCircleBtn = !this.isClickCircleBtn
      }
    },
    mounted () {
      this.$nextTick(() => {
        this.resetSwipeClass()
        document.body.scrollTop = this.scrollTop
      })
    },
    components: {
      'btn-circle': BtnCircle,
      'btn-circle-menu': BtnCircleMenu,
      'menu-item': MenuItem,
      'feed-list': FeedList
    }
  }
</script>

<style lang="less">
  .wrap {
    position: relative;
  }

  .header {
    width: 100%;
    height: 50px;
    background-color: #288CE5;
    padding: 0 8px;
    position: fixed;
    top: 0;
    z-index: 999;
    color: #fff;
    box-sizing: border-box;
  }

  .search {
    background-color: #50A2EA;
    padding: 6px 8px;
    .search-txt {
      margin-left: 8px;
      color: #85BFF0;
    }
  }

  .fa-flash, .fa-search {
    color: #fff;
  }

  .btn-live {
    padding: 0;
    margin-left: 8px;
  }

  .feed-list {
    width: 100%;
    background-color: #F2F4F7;
    padding-top: 60px;
  }

  .icon-close {
    margin-left: 2px;
  }
  .icon-weibiaoti- {
    margin: -2px 0 0 3px;
  }
</style>
